<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :data="data"
      :option="option"
      :page.sync="page"
      :before-open="beforeOpen"
      :cell-style="cellStyle"
      @on-load="rowLoad"
      @search-change="searchChange"
      @row-update="rowUpdate"
      @row-del="rowDel"
      @row-save="rowSave"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot-scope="{ type, size, row, index }" slot="menu">
        <el-button
          icon="el-icon-document-checked"
          :size="size"
          :type="type"
          @click="handleApprove(row, index)"
          >审批</el-button
        >
      </template>
      <template slot="expand" slot-scope="{ row }">
        <div style="padding: 20px">
          <el-descriptions
            v-for="(item, index) in row.studentList"
            :key="index"
            :title="item.position"
            :column="4"
            direction="vertical"
            border
          >
            <el-descriptions-item label="姓名">
              {{ item.name }}
            </el-descriptions-item>
            <el-descriptions-item label="在校职位">
              {{ item.position }}
            </el-descriptions-item>
            <el-descriptions-item label="毕业年份">
              {{ item.graduationYear }}
            </el-descriptions-item>
            <el-descriptions-item label="所在班级">
              {{ item.graduationClass }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </avue-crud>
    <el-drawer title="审批" :visible.sync="drawer">
      <div class="demo-drawer__content" style="width: 100%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="审批意见" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="2">通过</el-radio>
              <el-radio label="-1">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批说明" prop="opinion">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入审批意见"
              v-model="ruleForm.opinion"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span class="avue-dialog__footer avue-dialog__footer--right">
        <el-button @click="$refs.drawer.closeDrawer()">取 消</el-button>
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
      </span>
    </el-drawer>
  </basic-container>
</template>

<script>
import avue from "@/mixins/avue.js";
import { baseUrl } from "@/config/env";
import { SE } from "@/common/constants.js";
import { dict_item_list, area_list } from "@/api/core/system";
import {
  card_page,
  card_edit,
  card_add,
  card_delete,
  card_approve,
} from "@/api/alumni";

export default {
  mixins: [avue],
  data() {
    return {
      drawer: false,
      uploadProp: {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        action: baseUrl + "api/app/card/upload",
      },
      data: [],
      option: {
        expand: true,
        expandRowKeys: [1],
        rowKey: "id",
        menuType: "menu",
        menuWidth: "150px",
        addBtn: false,
        viewBtn: true,
        span: 8,
        labelWidth: "110",
        column: [
          {
            label: "姓名",
            prop: "realName",
            width: 80,
            search: true,
            display: false,
          },
          {
            label: "头像",
            prop: "avatar",
            type: "upload",
            width: 80,
            display: false,
          },
          {
            label: "联系方式",
            prop: "phone",
            width: 100,
            search: true,
            display: false,
          },
          // {
          //   label: "毕业年份",
          //   prop: "graduationYear",
          //   type: "number",
          //   width: 70,
          //   display: false,
          // },
          // {
          //   label: "毕业班级",
          //   prop: "graduationClass",
          //   type: "select",
          //   width: 70,
          //   dicData: [],
          //   props: {
          //     label: "text",
          //     value: "value",
          //   },
          //   display: false,
          // },
          // {
          //   label: "在校职位",
          //   prop: "position",
          //   type: "select",
          //   width: 70,
          //   dicData: [],
          //   props: {
          //     label: "text",
          //     value: "value",
          //   },
          //   display: false,
          // },
          {
            label: "工作单位",
            prop: "workCompany",
            display: false,
          },
          {
            label: "工作地点",
            prop: "workPlace",
            display: false,
          },
          {
            label: "具体行业",
            prop: "workIndustry",
            display: false,
          },
          {
            label: "单位职务",
            prop: "workPosition",
            display: false,
          },
          {
            label: "状态",
            prop: "status",
            type: "select",
            display: false,
            width: 70,
            search: true,
            dicData: [],
            props: {
              label: "text",
              value: "value",
            },
          },
        ],
        group: [
          {
            label: "基本信息",
            prop: "base",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "姓名",
                prop: "realName",
                search: true,
                rules: [
                  {
                    required: true,
                    message: "必填",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "联系方式",
                prop: "phone",
                align: "left",
                search: true,
              },
              {
                label: "身份证号",
                prop: "zjhm",
                search: true,
              },
              // {
              //   label: "毕业年份",
              //   prop: "graduationYear",
              // },
              // {
              //   label: "毕业班级",
              //   prop: "graduationClass",
              //   type: "select",
              //   dicData: [],
              //   props: {
              //     label: "text",
              //     value: "value",
              //   },
              //   rules: [
              //     {
              //       required: true,
              //       message: "必填",
              //       trigger: "blur",
              //     },
              //   ],
              // },
              // {
              //   label: "在校类型",
              //   prop: "position",
              //   type: "select",
              //   dicData: [],
              //   props: {
              //     label: "text",
              //     value: "value",
              //   },
              //   rules: [
              //     {
              //       required: true,
              //       message: "必填",
              //       trigger: "blur",
              //     },
              //   ],
              // },
            ],
          },
          {
            label: "教育信息",
            prop: "edu",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "大学毕业学校",
                prop: "universityName",
              },
              {
                label: "大学毕业专业",
                prop: "universityMajor",
              },
              {
                label: "大学毕业年份",
                prop: "universityYear",
                type: "number",
              },
              {
                label: "硕士毕业学校",
                prop: "masterName",
              },
              {
                label: "硕士毕业专业",
                prop: "masterMajor",
              },
              {
                label: "硕士毕业年份",
                prop: "masterYear",
                type: "number",
              },
              {
                label: "博士毕业学校",
                prop: "doctorName",
              },
              {
                label: "博士毕业专业",
                prop: "doctorMajor",
              },
              {
                label: "博士毕业年份",
                prop: "doctorYear",
                type: "number",
              },
            ],
          },
          {
            label: "工作信息",
            prop: "work",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "工作单位",
                prop: "workCompany",
              },
              {
                label: "工作地点",
                prop: "workPlace",
              },
              {
                label: "所在区域",
                prop: "workArea",
                type: "cascader",
                props: {
                  label: "name",
                  value: "code",
                },
                dataType: "string",
                lazy: true,
                lazyLoad(node, resolve) {
                  // console.log(node)
                  const stop_level = 2;
                  const level = node.level;
                  const data = node.data || {};
                  const code = data.code;
                  let list = [];
                  const callback = () => {
                    resolve(
                      (list || []).map((ele) => {
                        return Object.assign(ele, {
                          leaf: level >= stop_level,
                        });
                      })
                    );
                  };
                  if (level === 0) {
                    area_list({ pCode: 0 }).then((res) => {
                      list = res.result;
                      callback();
                    });
                  } else if (level === 1) {
                    area_list({ pCode: code }).then((res) => {
                      list = res.result;
                      callback();
                    });
                  } else if (level === 2) {
                    area_list({ pCode: code }).then((res) => {
                      list = res.result;
                      callback();
                    });
                  } else {
                    callback();
                  }
                },
              },
              {
                label: "单位职务",
                prop: "workPosition",
              },
              {
                label: "单位所属类别",
                prop: "workCategory",
                type: "select",
                dicData: [],
                props: {
                  label: "text",
                  value: "value",
                },
              },
              {
                label: "具体行业",
                prop: "workIndustry",
              },
            ],
          },
          {
            label: "校友卡照片",
            prop: "img",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "照片墙",
                prop: "images",
                type: "upload",
                dataType: "json",
                props: {
                  label: "fileName",
                  value: "previewUrl",
                },
                propsHttp: {
                  // home: baseUrl,
                  // res: "result.0",
                  url: "previewUrl",
                  name: "fileName",
                },
                listType: "picture-card",
                action: "alumni/app/uploadFile",
                limit: 9,
                span: 24,
              },
            ],
          },
          {
            label: "其他",
            prop: "other",
            icon: "el-icon-edit-outline",
            column: [
              {
                label: "补充说明",
                prop: "remark",
                type: "textarea",
                span: 24,
              },
            ],
          },
        ],
      },
      ruleForm: {
        status: "",
        opinion: "",
      },
      rules: {
        status: [
          { required: true, message: "请选择审批意见", trigger: "blur" },
        ],
        // opinion: [
        //   { required: true, message: "请选择活动区域", trigger: "change" },
        // ],
      },
    };
  },
  created() {
    dict_item_list({ code: "card_status" }).then((res) => {
      this.findObject(this.option.column, "status").dicData = res.result;
    });
    // let column = this.option.group[0].column;
    // dict_item_list({ code: "position" }).then((res) => {
    //   this.findObject(column, "position").dicData = res.result;
    //   // this.$refs.crud.updateDic("position", res.result)
    // });
    // dict_item_list({ code: "graduationClass" }).then((res) => {
    //   this.findObject(column, "graduationClass").dicData = res.result;
    // });
    dict_item_list({ code: "work_category" }).then((res) => {
      this.findObject(this.option.group[2].column, "workCategory").dicData =
        res.result;
    });
  },
  methods: {
    handleChange(file, fileLis) {
      console.log(file, fileLis);
    },
    handleSuccess(res, file, fileList) {
      this.rowLoad();
    },
    handleApprove(row) {
      this.drawer = true;
      this.ruleForm.id = row.id;
    },
    cellStyle({ row, column }) {
      if (column.property == "status") {
        if (row.status === "2") {
          return {
            color: "green",
            fontWeight: "bold",
            fontSize: "20",
          };
        } else if (row.status === "1") {
          return {
            color: "blue",
            fontWeight: "bold",
            fontSize: "20",
          };
        } else if (row.status === "-1" || row.status === "-2") {
          return {
            color: "red",
            fontWeight: "bold",
            fontSize: "20",
          };
        }
      }
    },
    beforeOpen(done, type) {
      if (["edit"].includes(type)) {
        // if (this.form.images) {
        //   let ret = JSON.parse(this.form.images).map((item) => {
        //     return item.previewUrl;
        //   });
        //   this.form.imgs = ret.join(",");
        // }
      }
      done();
    },
    rowLoad() {
      card_page(this.params).then((res) => {
        let result = this.$s.res(res);
        this.data = result.records;
        this.page.total = result.total;
      });
    },
    rowSave(row, loading, done) {
      card_add(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      card_edit(row)
        .then((res) => {
          this.$s.suc(res);
        })
        .then(() => {
          this.rowLoad();
          done();
          loading();
        });
    },
    rowDel(row, index, done) {
      this.$confirm("确定数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          card_delete({ id: row.id }).then((res) => {
            this.$s.suc(res);
          });
        })
        .then(() => {
          this.rowLoad();
          done();
        });
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          card_approve(this.ruleForm).then((res) => {
            if (this.$s.suc(res)) {
              this.drawer = false;
              this.rowLoad();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    dowwloadTemplate() {
      // window.open("/template/同学录模板.xlsx");
      let url = "/template/同学录模板.xlsx";
      const x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = "blob";
      x.onload = function () {
        const url = window.URL.createObjectURL(x.response);
        const elink = document.createElement("a");
        elink.href = url;
        elink.target = "_self"; // 当前页 target打开新页面
        elink.setAttribute("download", "同学录模板.xlsx");
        elink.style.display = "none";
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      };
      x.send();
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.demo-drawer__content {
  width: 100%;
  padding: 20px;
}
</style>
